<template>
    <div class="user-info-page">
      <div class="oj-user-info oj-user-info-page">
        <div class="oj-user-info-body">
          <el-form :model="userDetailForm" label-position="top" status-icon label-width="100px" class="demo-ruleForm">
            <div class="oj-user-info-subtitle-box">
              <div class="oj-user-info-subtitle">
                <span class="oj-user-info-dot">
                  基本信息
                </span>
                <div class="opt-box">
                    <!-- v-if实现元素的自由展示 -->
                  <el-button class="user-info-edit" v-if="isDisabled()" type="text" @click="changeState('updating')">
                    编辑
                  </el-button>
                  <el-button class="user-info-edit" v-if="!isDisabled()" type="text" @click="changeState('normal')">
                    取消
                  </el-button>
                  <el-button class="user-info-back" type="text" @click="goBack()">
                    返回
                  </el-button>
                </div>
              </div>
  
            </div>
            <div class="ku-user-section">
              <el-form-item prop="nickName">
                <div class="photo-image-box">
                  <div class="photo-image">
                    <div class="left">
                      <img width="80px" v-if="!userDetailForm.headImage" height="80px" src="@/assets/user/head_image.png">
                      <img width="80px" v-else height="80px" :src="userDetailForm.headImage">
                    </div>
                    <div class="right" v-if="!userDetailForm.headImage">
                      <div class="bold">上传你的个人头像</div>
                      <div class="normal">上传你的个性头像展示你的个人风格</div>
                    </div>
                  </div>
                  <div v-if="!isDisabled()">
                    <!-- el-upload 实现文件上传的的窗口 -->
                     <!-- action=  配置上传文件的接口 -->
                      <!-- headers= upload组件并没有使用axios不会过请求拦截器 -->
                    <el-upload :action="uploadUrl" :headers="headers"
                      :on-error="handleUploadError" :on-success="handleUploadSuccess" :show-file-list="false">
                      <el-button type="info">{{ userDetailForm.headImage ? '更换头像' : '上传头像' }}</el-button>
                      <template #tip> </template>
                    </el-upload>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="昵称" prop="nickName">
                <el-input v-if="!isDisabled()" type="text" v-model="userDetailForm.nickName" autocomplete="off"
                  placeholder="请填写您的昵称" maxlength="8"></el-input>
                <span :class="userDetailForm.nickName ? 'right-info' : 'right-info gray'" v-else>
                  {{ userDetailForm.nickName || "请填写您的昵称" }}
                </span>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="userDetailForm.sex" v-if="!isDisabled()">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
                <span :class="userDetailForm.sex ? 'right-info' : 'right-info gray'" v-else>
                  {{ userDetailForm.sex == null ? "请选择您的性别" : +userDetailForm.sex == 1 ? "男" : "女" }}
                </span>
              </el-form-item>
              <el-form-item label="班级" prop="className">
                <el-input v-if="!isDisabled()" type="text" v-model="userDetailForm.className" autocomplete="off"
                  placeholder="请填写您的班级名称"></el-input>
                <span :class="userDetailForm.className ? 'right-info' : 'right-info gray'" v-else>
                  {{ userDetailForm.className || "请填写您的班级名称" }}
                </span>
              </el-form-item>
              <el-form-item label="专业" prop="majorName">
                <el-input v-if="!isDisabled()" type="text" v-model="userDetailForm.majorName" autocomplete="off"
                  placeholder="请填写您的专业名称"></el-input>
                <span :class="userDetailForm.majorName ? 'right-info' : 'right-info gray'" v-else>
                  {{ userDetailForm.majorName || "请填写您的专业名称" }}
                </span>
              </el-form-item>
              <el-form-item label="手机" prop="phone">
                <el-input v-if="!isDisabled()" type="text" v-model="userDetailForm.phone" autocomplete="off"
                  placeholder="请填写常用手机号"></el-input>
                <span :class="userDetailForm.phone ? 'right-info' : 'right-info gray'" v-else>
                  {{ userDetailForm.phone || "请填写常用手机号" }}
                </span>
              </el-form-item>
              <el-form-item label="常用邮箱" prop="email">
                <el-input v-if="!isDisabled()" type="text" v-model="userDetailForm.email" autocomplete="off"
                  placeholder="请填写常用邮箱"></el-input>
                <span :class="userDetailForm.email ? 'right-info' : 'right-info gray'" v-else>
                  {{ userDetailForm.email || "请填写常用邮箱" }}
                </span>
              </el-form-item>
              <el-form-item label="微信号码" prop="wechat">
                <el-input v-if="!isDisabled()" type="text" v-model="userDetailForm.wechat" autocomplete="off"
                  placeholder="请填写微信号码"></el-input>
                <span :class="userDetailForm.wechat ? 'right-info' : 'right-info gray'" v-else>
                  {{ userDetailForm.wechat || "请填写微信号" }}
                </span>
              </el-form-item>
  
              <el-form-item label="个人介绍" prop="introduce">
                <el-input v-if="!isDisabled()" :rows="5" type="textarea" v-model="userDetailForm.introduce"
                  autocomplete="off" placeholder="请填写个人介绍" maxlength="80" show-word-limit></el-input>
                <span :class="userDetailForm.introduce ? 'right-info intro' : 'right-info intro gray'" v-else>
                  {{ userDetailForm.introduce || "请用一段话介绍自己,该简介将会在您的个人主页展示" }}
                </span>
              </el-form-item>
            </div>
            <div class="ku-login-footer" v-if="!isDisabled()">
              <el-button class="ku-login-footer-btn" type="info" plain @click="changeState('normal')">取消</el-button>
              <el-button class="ku-login-footer-btn blue" type="primary" plain @click="editUser()">保存</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { getUserDetailService,editUserService, updateHeadImageService } from '@/apis/user'
  import { getToken } from '@/utils/cookie'
  import router from '@/router'
  import { ElMessage } from 'element-plus';
  import { reactive, ref } from "vue"

  
  const userDetailForm = reactive({})
  const currentState = ref('normal')
  
  async function getUserDetail() {
    const userRef = await getUserDetailService()
    currentState.value = "normal"
    Object.assign(userDetailForm, userRef.data)
  }
  getUserDetail()
  
  function goBack() {
    router.go(-1)
  }
  
  function changeState(state) {
    currentState.value = state
  }
  
  function isDisabled() {
    return currentState.value === "normal"
  }
  
  async function editUser() {
    await editUserService(userDetailForm)
    getUserDetail()
    location.reload();
  }
  //http://127.0.0.1:19090/friend/file/upload
  const uploadUrl = ref("/dev-api/file/upload")
  
  const headers = ref({
    Authorization: "Bearer " + getToken(),
  })
  
  async function handleUploadSuccess(res) {
    if (res.code !== 1000) {
      ElMessage.error(res.msg)
    } else {
      const userUpdateDTO = reactive({
        headImage : res.data.name
      })
      await updateHeadImageService(userUpdateDTO)
      //刷新页面
      getUserDetail()
      ElMessage.success("头像上传成功")
      location.reload();
    }
  }
  
  </script>
  
  <style lang="scss" scoped>
  .user-info-page {
    background-color: #f8fafc;
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 64px);
    padding: 24px;

    :deep(.el-form) {
      .el-button--info {
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        color: #1e293b;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
          background: #32C5FF;
          border-color: #32C5FF;
          color: #fff;
          transform: translateY(-1px);
          box-shadow: 0 4px 6px -1px rgba(50, 197, 255, 0.2);
        }
      }

      .el-form-item {
        max-width: 1120px;
        width: 100%;
        margin-bottom: 32px;

        .el-form-item__label {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #1e293b;
          margin-bottom: 12px;
          padding: 0;
        }

        .photo-image-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 24px;
          background: #fff;
          border-radius: 16px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          margin-bottom: 32px;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
          }

          .photo-image {
            display: flex;
            flex: 1;
            margin-right: 24px;

            img {
              width: 96px;
              height: 96px;
              border-radius: 50%;
              object-fit: cover;
              border: 4px solid #f1f5f9;
              transition: all 0.3s ease;

              &:hover {
                transform: scale(1.05);
                border-color: #32C5FF;
              }
            }

            .right {
              flex: 1;
              margin-left: 24px;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .bold {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 20px;
                color: #1e293b;
                margin-bottom: 8px;
                line-height: 1.4;
              }

              .normal {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #64748b;
                line-height: 1.5;
              }
            }
          }
        }

        .el-input,
        .el-select,
        .el-radio-group {
          width: 100%;
          height: 48px;
          border-radius: 12px;
          outline: none;
          border: 1px solid #e2e8f0;
          font-size: 14px;
          transition: all 0.3s ease;

          &:hover {
            border-color: #32C5FF;
          }

          &:focus-within {
            border-color: #32C5FF;
            box-shadow: 0 0 0 2px rgba(50, 197, 255, 0.2);
          }

          input {
            color: #1e293b;
            padding: 0 16px;
          }
        }

        .el-radio-group {
          border: none;
          padding: 8px 0;
        }

        .el-input__wrapper {
          border: none;
          box-shadow: none;
          border-radius: 12px;
          padding: 0 16px;
          color: #1e293b;
          background: #f8fafc;
          transition: all 0.3s ease;

          &:hover {
            background: #fff;
          }

          &:focus-within {
            background: #fff;
            box-shadow: 0 0 0 2px rgba(50, 197, 255, 0.2);
          }
        }
      }
    }
  }

  .oj-user-info {
    margin: 0 auto;
    max-width: 1520px;
    width: 100%;

    &.oj-user-info-page {
      background: transparent;
      margin-bottom: 0;

      .user-info-back {
        cursor: pointer;
        color: #64748b;
        font-size: 14px;
        transition: all 0.3s ease;

        &:hover {
          color: #32C5FF;
          transform: translateX(-4px);
        }
      }

      .user-info-edit {
        cursor: pointer;
        font-size: 14px;
        margin-left: auto;
        color: #32C5FF;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-1px);
        }
      }

      .ku-user-section {
        background: #fff;
        border-radius: 16px;
        padding: 32px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }

      .oj-user-info-body {
        padding: 0;

        .oj-user-info-subtitle-box {
          padding: 24px;
          padding-bottom: 0;

          .oj-user-info-subtitle {
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 24px;
            color: #1e293b;
            line-height: 1.4;
            position: relative;
            padding-left: 16px;

            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 4px;
              height: 20px;
              background: linear-gradient(135deg, #32C5FF 0%, #3EC8FF 100%);
              border-radius: 2px;
            }
          }
        }
      }

      .ku-login-footer {
        text-align: right;
        padding: 24px;
        margin-top: 32px;

        .ku-login-footer-btn {
          width: 120px;
          height: 48px;
          border-radius: 12px;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(50, 197, 255, 0.2);
          }

          &.blue {
            background: linear-gradient(135deg, #32C5FF 0%, #3EC8FF 100%) !important;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
  </style>
  
  <style lang="scss">
  .oj-user-info-page {
    .el-form-item__label {
      padding-right: 24px !important;
      color: #64748b;
    }
  
    .el-form {
      padding-bottom: 0;
    }
  
    .right-info {
      display: inline-block;
      min-width: 90px;
      color: #1e293b;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      width: 100%;
      height: 48px;
      line-height: 48px;
      padding: 0 16px;
      background: #f8fafc;
      border-radius: 12px;
      transition: all 0.3s ease;
  
      &:hover {
        background: #fff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }
  
      &.gray {
        color: #94a3b8;
      }
  
      &.intro {
        height: auto;
        min-height: 48px;
        line-height: 1.5;
        padding: 12px 16px;
        white-space: pre-wrap;
      }
    }
  }
  </style>